import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Button, Platform } from 'react-native';
import * as Updates from 'expo-updates';
import { ThemedText } from './ThemedText';
import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

export const UpdateManager: React.FC = () => {
  const [updateAvailable, setUpdateAvailable] = useState(false);
  const [checking, setChecking] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const colorScheme = useColorScheme();

  // 检查更新
  const checkForUpdate = async () => {
    if (__DEV__) {
      console.log('开发环境中不检查更新');
      return;
    }

    try {
      setChecking(true);
      setError(null);
      
      const update = await Updates.checkForUpdateAsync();
      
      if (update.isAvailable) {
        setUpdateAvailable(true);
        console.log('有新的更新可用');
      } else {
        console.log('没有可用的更新');
      }
    } catch (error) {
      console.error('检查更新时出错:', error);
      setError('检查更新失败');
    } finally {
      setChecking(false);
    }
  };

  // 下载并应用更新
  const applyUpdate = async () => {
    try {
      setChecking(true);
      setError(null);
      
      // 下载新的更新
      await Updates.fetchUpdateAsync();
      
      // 应用更新并重启应用
      await Updates.reloadAsync();
    } catch (error) {
      console.error('应用更新时出错:', error);
      setError('应用更新失败');
      setChecking(false);
    }
  };

  // 应用启动时自动检查更新
  useEffect(() => {
    if (!__DEV__) {
      checkForUpdate();
    }
  }, []);

  // 如果是开发环境，不显示更新管理器
  if (__DEV__) {
    return null;
  }

  return (
    <View style={styles.container}>
      {updateAvailable && (
        <View style={[
          styles.updateBanner, 
          {backgroundColor: colorScheme ? Colors[colorScheme].tint : Colors.light.tint}
        ]}>
          <ThemedText style={styles.updateText}>
            有新版本可用
          </ThemedText>
          <Button
            title={checking ? "更新中..." : "立即更新"}
            onPress={applyUpdate}
            disabled={checking}
            color="#fff"
          />
        </View>
      )}
      {error && (
        <ThemedText style={styles.errorText}>{error}</ThemedText>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1000,
  },
  updateBanner: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#4630EB',
  },
  updateText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  errorText: {
    color: 'red',
    textAlign: 'center',
    padding: 5,
  }
});
